<template>
  <el-card>
    <template #header>
      <span>
        <img :src="logo" alt />
      </span>
    </template>
    <!-- 条形图 -->
    <ve-histogram :data="chartData"></ve-histogram>
    <!-- 折现图 -->
    <ve-line :data="chartData"></ve-line>
  </el-card>
</template>
<script>
import logo from "../assets/logo.png";
//条形图
// import VeLine from "v-charts/lib/line.common.js";
//柱状图
// import VeHistogram from "v-charts/lib/histogram.common.js";
//饼图
// import VePie from "v-charts/lib/pie.common.js";
export default {
  props: ["id"],
  //局部引入方式，，，，，已经在main.js中全局引入
  // components: {
  //   [VeLine.name]: VeLine,
  //   [VeHistogram.name]: VeHistogram,
  //   [VePie.name]: VePie
  // },
  data() {
    return {
      logo,
      answers: [],
      //  chartData: {
      //     columns: ['日期', '访问用户', '下单用户', '下单率'],
      //     rows: [
      //       { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
      //       { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
      //       { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
      //       { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
      //       { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
      //       { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
      //     ]
      //   }
    };
  },
  computed: {
    chartData() {
      const rows = [];
      if (this.answers[0]) {
        const items = this.answers[0].item;
        const table = {};
        // console.log(items);
        items.forEach(el => {
          const row = { x: el.item_name, num: 1 };
          table[el.item_name] = 0;
          rows.push(row);
        });

        this.answers.forEach(p => {
          p.content.forEach(c => {
            table[c.answer]++;
          });
        });

        rows.forEach((el, index) => {
          rows[index].num = table[el.x];
        });
      }

      return {
        columns: ["x", "num"],
        rows
      };
    }
  },
  created() {
    this.getAnswers();
  },
  methods: {
    async getAnswers() {
      const {
        data: { data }
      } = await this.axios({
        url: "/answers",
        params: {
          paper_id: this.id
        }
      });
      this.answers = data;
    }
  }
};
</script>
